{extend name="layout/layout" /}

{block name="content"}
<style>
.table-responsive .message{
    border: #eee solid 1px;
    margin-bottom: 10px;
    padding: 20px;
}
.message .header .firstline{
    margin-top: -56px;
    margin-left: 75px;
    display: block;
}
.message .header .secondline{
    margin-left: 75px;
}
.message .header .operator{
    float: right;
}
.message .messageContent {
    margin-top: 20px;
}
.message .reply{
    margin-top: 15px;
}
.message .reply .operator2{
    float: right;
}
.message .reply .operator2 span{
    margin-right: 10px;
    display: inline-block;
}
</style>
<div class="row">
    <div class="col-lg-12">
        <div class="box box-success">
            <div class="box-header with-border">
                <h3 class="box-title">{$title}</h3>
                <div class="box-tools pull-right">
                    <div class="col-md-9"><div class="form-inline"><form id="searchForm" class="relative row">
                        <select name="search" class="form-control" id="doSearch"><option value="0">所有留言</option><option value="1">待回复</option><option value="2">已回复</option></select>
                    </form></div></div>
                </div>
            </div>
            <div class="box-body ">
                <form class="js-ajax-form">
                    <div class="table-responsive">
                        {foreach $datas as $data}
                        <div class="message {$data->tag}">
                            <div class="header">
                                <img class="" src="{$data->avatarUrl|default='/public/static/pages/image/user.jpg'}" style="width: 60px;height: 60px;border-radius: 30px;" alt="">
                                <span class="firstline">{$data->nickName}</span>
                                <span class="secondline">{$data->createDate|date="Y-m-d H:i:s",###}</span>
                                <span class="operator">
                                    <a href="#" data-id="{$data->id}" class="btn btn-info btn-xs doreplay">回复</a>
                                    <a href="{:url('admin/'.strtolower($model).'/delete', ['id' => $data->id])}" class="btn btn-danger btn-xs" data-confirm="" data-title="" data-confirmbtn="" data-cancelbtn="">删除</a>
                                </span>
                            </div>
                            <div class="messageContent">
                                <div>
                                    <p>留言内容：{$data->content}</p>
                                    <div>
                                        {volist name="data->image" id="vo"}
                                        <img src="{$vo.imgUrl}" style="width: 100px;height: 100px;" alt="">
                                        {/volist}
                                    </div>
                                </div>
                            </div>
                            <div class="reply">
                                {volist name="data->replay" id="rr"}
                                <div>
                                    <p>村委回复：
                                        <span class="operator2"><span>{$rr.createDate|date="Y-m-d H:i:s",###}</span><a href="{:url('admin/'.strtolower($model).'/delete', ['id' => $rr->id])}" class="btn btn-danger btn-xs" data-confirm="" data-title="" data-confirmbtn="" data-cancelbtn="">删除</a></span></p>
                                    <p>{$rr.content} </p>
                                </div>
                                {/volist}
                            </div>
                        </div>
                        {/foreach}
                    </div>
                </form>
            </div>
            <div class="box-footer">
                {include file="common:paginate" /}
            </div>
        </div>
    </div>
</div>
<div id="common-modal" class="modal modal-member in" aria-hidden="false" style="display: none; padding-right: 17px;">
    <div class="modal-dialog" style="width: 600px; margin: 194.5px auto;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">留言回复</h4>
            </div>
            <div class="modal-body" style="overflow-y: auto;">
                <textarea class="replayContent" name="content" maxlength="100" placeholder="回复内容，最多输入100字" cols="90" rows="10"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success" id="form-submit">确定</button>
                <span class="help-block"></span>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="pagescript"}
<script>
    $('.doreplay').on('click',function(){
        $('#common-modal').modal('show');
        var id = $(this).attr('data-id');

        $('.modal-footer .btn-success').on('click',function(){
            var content = $('.replayContent').val();
            $("#form-submit").attr("disabled","disabled");
            var param = {"responderId": id,'content':content,'userId':'{$adminInfo.memberId}','villageId':'{$adminInfo.villageId}'};
            $.ajax({
                url : "{:url('admin/Villagemessages/addPost')}",
                type : 'post',
                dataType : 'json',
                contentType : "application/json; charset=utf-8",
                data : JSON.stringify(param),
            }).done(function(data) {
                if (data.code == 1) {
                    $('.help-block').html();
                    window.location.href = data.url; //加载页面数据
                } else if (data.code === 0 ) {  // 错误
                    console.log(data.msg);
                    $("#form-submit").removeAttr("disabled");
                    $('.help-block').html(data.msg).attr("style","color:red;"); // 返回错误信息
                }
            });
        });
    });

    $('#doSearch').change(function(event){  //门店商品分类搜索
        console.log(this);
        var status =   $("#doSearch").val();  //1-待回复，2-已回复，1-所有留言
        console.log(status);
        if(status == 1) {
            $('.already').hide();
            $('.toreplay').show();
        } else if(status == 2) {
            $('.toreplay').hide();
            $('.already').show();
        } else {
            $('.toreplay').show();
            $('.already').show();
        }
    });
</script>
{/block}